<template>
	<view class="stats-container">
		<view class="stats-grid">
			<view class="stat-card">
				<view class="stat-icon total-icon">📊</view>
				<view class="stat-info">
					<text class="stat-value">{{ totalPoints }}</text>
					<text class="stat-label">累计积分</text>
				</view>
			</view>

			<view class="stat-card">
				<view class="stat-icon current-icon">💎</view>
				<view class="stat-info">
					<text class="stat-value">{{ currentPoints }}</text>
					<text class="stat-label">可用积分</text>
				</view>
			</view>

			<view class="stat-card">
				<view class="stat-icon level-icon">🏆</view>
				<view class="stat-info">
					<text class="stat-value">{{ memberLevelText }}</text>
					<text class="stat-label">会员等级</text>
				</view>
			</view>

			<view class="stat-card">
				<view class="stat-icon used-icon">💰</view>
				<view class="stat-info">
					<text class="stat-value">{{ usedPoints }}</text>
					<text class="stat-label">已使用</text>
				</view>
			</view>
		</view>

		<!-- 积分进度条 -->
		<!-- <view class="progress-section">
			<view class="progress-header">
				<text class="progress-title">升级进度</text>
				<text class="progress-text">{{ nextLevelProgress }}%</text>
			</view>
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: nextLevelProgress + '%' }"></view>
			</view>
			<text class="progress-hint">再获得 {{ pointsToNextLevel }} 积分升级到下一等级</text>
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	interface Props {
		totalPoints : number
		currentPoints : number
		memberLevel : number
	}

	const props = defineProps<Props>()

	// 已使用积分
	const usedPoints = computed(() => {
		return props.totalPoints - props.currentPoints
	})

	// 会员等级文本
	const memberLevelText = computed(() => {
		const levelMap = {
			0: 'LV0',
			1: 'LV1',
			2: 'LV2',
			3: 'LV3',
			4: 'LV4',
			5: 'LV5'
		}
		return levelMap[props.memberLevel] || 'LV0'
	})

	// 升级所需积分阈值
	const levelThresholds = [0, 100, 500, 1000, 2000, 5000, 10000]

	// 下一等级进度
	const nextLevelProgress = computed(() => {
		const currentLevel = props.memberLevel
		const nextLevel = Math.min(currentLevel + 1, levelThresholds.length - 1)

		if (currentLevel >= levelThresholds.length - 1) {
			return 100 // 已达到最高等级
		}

		const currentThreshold = levelThresholds[currentLevel]
		const nextThreshold = levelThresholds[nextLevel]
		const progress = ((props.totalPoints - currentThreshold) / (nextThreshold - currentThreshold)) * 100

		return Math.min(Math.max(progress, 0), 100)
	})

	// 距离下一等级所需积分
	const pointsToNextLevel = computed(() => {
		const currentLevel = props.memberLevel
		const nextLevel = Math.min(currentLevel + 1, levelThresholds.length - 1)

		if (currentLevel >= levelThresholds.length - 1) {
			return 0 // 已达到最高等级
		}

		const nextThreshold = levelThresholds[nextLevel]
		return Math.max(nextThreshold - props.totalPoints, 0)
	})
</script>

<style lang="scss" scoped>
	.stats-container {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.stat-card {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #f8f9ff;
		border-radius: 16rpx;

		.stat-icon {
			width: 50rpx;
			height: 50rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-right: 15rpx;

			&.total-icon {
				background: linear-gradient(135deg, #ff6b6b, #ffa726);
			}

			&.current-icon {
				background: linear-gradient(135deg, #4ecdc4, #44a08d);
			}

			&.level-icon {
				background: linear-gradient(135deg, #ffd54f, #ffb300);
			}

			&.used-icon {
				background: linear-gradient(135deg, #ba68c8, #9c27b0);
			}
		}

		.stat-info {
			flex: 1;

			.stat-value {
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 4rpx;
			}

			.stat-label {
				font-size: 22rpx;
				color: #666;
			}
		}
	}

	.progress-section {
		.progress-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;

			.progress-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.progress-text {
				font-size: 24rpx;
				color: #667eea;
				font-weight: bold;
			}
		}

		.progress-bar {
			height: 12rpx;
			background: #f0f0f0;
			border-radius: 6rpx;
			overflow: hidden;
			margin-bottom: 10rpx;

			.progress-fill {
				height: 100%;
				background: linear-gradient(90deg, #667eea, #764ba2);
				border-radius: 6rpx;
				transition: width 0.3s ease;
			}
		}

		.progress-hint {
			font-size: 22rpx;
			color: #888;
		}
	}
</style>